<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .con {
            margin: 200px auto;
            border: 1px solid #ccc;
            width: 400px;
            height: 300px;
            padding-top: 80px;
            box-sizing: border-box;
        }

        .inp {
            margin: 20px auto;
            text-align: center;
        }

        .btn {
            text-align: center;
            height: 30px;
            width: 100px;
            margin: 10px auto;
            /* border: 1px solid; */
            line-height: 30px;
        }

        #register,
        #login {
            cursor: pointer;
            font-size: 12px;
            color: #ccc;

        }

        .cover {
            background: #ccc;
            width: 100%;
            height: 100%;
            filter: blur(10px);
        }

        .win {
            position: absolute;
            border: 1px solid black;
            width: 400px;
            height: 300px;
            padding-top: 80px;
            top: 25%;
            left: 30%;
            background: #fff;
            box-sizing: border-box;

        }
    </style>
</head>

<body>
    <div style="overflow: hidden; width: 100%; height: 100%;">
        <div class="con">
            <div class="inp">
                <label for="user">账户：</label>
                <input type="text" id="user" max="10">
            </div>
            <div class="inp">
                <label for="user">密码：</label>
                <input type="text" id="pwd" maxlength="6">
            </div>
            <div class="inp">
                <button class="btn">登录</button>
                <span id="register">去注册</span>
            </div>
        </div>
        <div class="cover" style="display: none;">
        </div>
        <div class="win" style="display: none;">
            <div class="inp">
                <label for="user">账户：</label>
                <input type="text" id="reguser" max="10">
            </div>
            <div class="inp">
                <label for="user">密码：</label>
                <input type="text" id="regpwd" maxlength="6">
            </div>
            <div class="inp">
                <button class="reg">注册</button>
                <span id="login">去登录</span>
            </div>
        </div>
    </div>
    <script>
        let btn = document.querySelector('.btn')
        let user = document.querySelector('#user')
        let pwu = document.querySelector('#pwd')
        let register = document.querySelector('#register')
        btn.onclick = function () {
            console.log(user.value, '账号');
            console.log(pwd.value, '密码');
            // alert('这是提示')
            let allObj = JSON.parse(localStorage.getItem('useMsg')) || []
            if (allObj.length == 0) {
                alert('请先进行注册操作')
                return
            } else {
                let idx = allObj.findIndex(item => item.user == user.value)
                if (idx != -1) {
                    if (allObj[idx].pwd == pwd.value) {
                        alert('登录成功')
                        user.value = ''
                        pwd.value = ''
                        window.location.href = 'https://lol.qq.com/main.shtml'

                    }
                }
                // allObj.map(item => {
                //     if (item.user == user.value && item.pwd == pwd.value) {
                //         alert('登录成功')
                //         window.location.href = 'https://lol.qq.com/main.shtml'
                //         return
                //     }
                // })
                // alert('账号或密码错误,请重新输入')

            }

        }
        register.onclick = function () {
            console.log('注册操作');
            document.querySelector('.con').style.display = 'none'
            document.querySelector('.cover').style.display = 'block'
            document.querySelector('.win').style.display = 'block'
            user.value = ''
            pwd.value = ''
        }
        document.querySelector('#login').onclick = function () {
            document.querySelector('.con').style.display = 'block'
            document.querySelector('.cover').style.display = 'none'
            document.querySelector('.win').style.display = 'none'
            document.querySelector('#reguser').value = ''
            document.querySelector('#regpwd').value = ''
        }
        document.querySelector('.reg').onclick = function () {
            let allObj = JSON.parse(localStorage.getItem('useMsg')) || []
            let obj = {
                user: document.querySelector('#reguser').value,
                pwd: document.querySelector('#regpwd').value
            }
            allObj.map(item => {
                if (item.user == obj.user) {
                    alert('当前用户已经注册')
                    document.querySelector('#reguser').value = ''
                    document.querySelector('#regpwd').value = ''
                    return
                }
            })
            allObj.push(obj)
            localStorage.setItem('useMsg', JSON.stringify(allObj))
        }

        // 尝试双向数据绑定

        // 首先定义一个方法用来数据劫持
        function observe(obj) {
            // 判断是否为obj
            if (!isObject(obj)) {
                // 抛出错误
                throw new TypeError()
            }
            // 在这里对obj进行循环
            // 因为Object.defineProperty 需要对key值进行监听
            Object.keys(obj).forEach(key => {
                // 创建一个内部变量
                let internalValue = obj[key]

                // 创建一个dep 实例
                let dep = new Dep()
                // 使用Object.defineProperty 进行数据监听
                // 在这里对gei 和set 方法进行重构
                Object.defineProperty(obj, key, {
                    // 获取数据并返回
                    get() {

                        dep.depend()
                        console.log(activeUpdate,'更新状态activeUpdate');
                        // 将获取到的数据进行返回
                        return internalValue
                    },
                    // 设置数据
                    set(newValue) {
                        console.log(newValue,'改变的值newValue');
                        const isChanged = internalValue !== newValue
                        if (isChanged) {
                            internalValue = newValue
                            dep.notify()
                        }
                    }
                })
            })
        }

        // 在这里对dep进行声明创建

        window.Dep = class Dep {
            constructor() {
                // 声明一个变量 订阅者
                this.subscribers = new Set()
            }
            // 同时此方法还应该有 依赖和通知

            depend() {
                // 通知判断状态
                if (activeUpdate) {
                    // 将当前活动更新注册为订阅者  
                    this.subscribers.add(activeUpdate)
                }
            }
            // 通知
            notify() {
                // 运行所有订阅函数
                console.log(this.subscribers,'所有的属性');
                this.subscribers.forEach(subscriber => subscriber())
            }
        }

        let activeUpdate
        // 一个自动执行的方法
        function autorun(update) {
            function wrappedUpdate() {
                activeUpdate = wrappedUpdate
                update()
                activeUpdate = null
            }
            wrappedUpdate()
        }

        // 一个判断是否为obj的方法
        function isObject(obj) {
            return typeof obj === 'object'
                && !Array.isArray(obj)
                && obj !== null
                && obj !== undefined
        }

        let state = {
            count: 0
        }

        observe(state)

        autorun(() => {
            window.console.log(`count is: ${state.count}`)
        })
        // state.count++
    </script>
</body>

</html>